<template>
  <div>
    <el-dialog
      title="用户编辑"
      :visible.sync="isVisible"
      :before-close="closeEdit"
      :destroy-on-close="true"
      width="30%"
    >
      <el-form
        :model="userInfo"
        ref="userInfo"
        label-width="100px"
        @keydown.enter.native="modifyUser('userInfo')"
        class="demo-ruleForm"
      >
      <!-- ID -->
        <el-form-item
          label="ID"
          prop="id"
        >
          <el-input
            readonly
            type="age"
            v-model.number="userInfo.id"
            autocomplete="off"
          ></el-input>
          <el-tag type="danger">不可更改</el-tag>
        </el-form-item>

        <!--名称-->
        <el-form-item
          label="名称"
          prop="name"
          :rules="[
            { required: true, message: '名称不能为空' },
          ]"
        >
          <el-input
            v-model="userInfo.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            { required: true, message: '密码不能为空' },
          ]"
        >
          <el-input
            type="password"
            v-model="userInfo.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modifyUser('userInfo')">保存</el-button
          >
          <el-button type="info" @click="closeEdit">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import user from '@/store/user';
import { message } from '@/element-ui/message';
export default {
  name: "UserEdit",
  data() {
    return {
      isVisible: false,
    };
  },
  props: ["visible", "closeEdit", "userInfo"],
  computed:{
    formData(){
        return userInfo
    }
  },
  watch: {
    visible(val) {
      this.isVisible = val;
    },
  },
  methods: {
    close(){
      this.isVisible = false
    },
    modifyUser(formName) {
      this.$refs[formName].validate((valid) => { 
        // 检查表单
        if (valid) {
             this.$store.dispatch('user/modify', [this.userInfo, this.close])
             this.closeEdit()
        } else {
          message.error('请输入正确的表单信息')
          return false
        }
      });
    },
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>